<template>
       <p>Vuex页</p>
       <p>count:{{ this.$store.state.count }}</p>
       <p>count:{{ count }}</p>
       <p>test:{{ test }}</p>
       <p>countAlias:{{ countAlias }}</p>


       <p>getters</p>
       <p>countAddFive:{{ this.$store.getters.countAddFive }}</p>
       <p>countAddFiveAddTen:{{ this.$store.getters.countAddFiveAddTen }}</p>
       <p>countAddFive:{{ countAddFive }}</p>
       <p>countAddFiveAddTen:{{ countAddFiveAddTen }}</p>
       <p>countAddFiveAlias:{{ countAddFiveAlias }}</p>

       <p>Matations===========</p>
       <button @click="addMut">addMut</button>
       <button @click="addPlayloadMut">addPlayloadMut</button>
       <button @click="add">add</button>
       <button @click="addCommit">addCommit</button>

       <p>Action========================</p>
       <button @click="addActionMut">addActionMut</button>
       <button @click="asyncAddAction">asyncAddAction</button>
       <button @click="asyncAddPloyloadAction">asyncAddPloyloadAction</button>
       <button @click="addAction">addAction</button>
       <button @click="addActionDispatch">addActionDispatch</button>
       <button @click="addActionAlias">addActionAlias</button>

       <h1>命名空间</h1>
       <p>无命名空间</p>
       <p>访问模块A的state{{ $store.state.a.countA }}</p>
       <p>访问模块A的getters{{ $store.getters.countAA }}</p>
       <p>有命名空间</p>
       <p>访问模块B的state{{ $store.state.b.countB }}</p>
       <p>访问模块B的getters{{ $store.getters['b/countBB'] }}</p>


       <h1>Vuex module</h1>
       <button @click="commitIncreaseA">触发-module-mutations</button>
       <button @click="commitAsyncIncreaseA">触发-module-actions</button>



</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
export default{
    computed:{
        // count(){
        //     return this.$store.state.count
        // },
        // test(){
        //     return this.$store.state.test
        // },
        // countAddFive(){
        //     return this.$store.getters.countAddFive
        // },
        // countAddFiveAddTen(){
        //     return this.$store.getters.countAddFiveAddTen
        // },
        ...mapState({
            count:'count',
            test:'test',
            countAlias:'count'
        }),
        ...mapGetters({
            countAddFive:'countAddFive',
            countAddFiveAddTen:'countAddFiveAddTen',
            countAddFiveAlias:'countAddFive'
        })
    },
    methods:{
        addMut(){
            this.$store.commit('add')
        },
        addPlayloadMut(){
        this.$store.commit({
            type:'addPlayload',
            num:10
        })
       },
       addCommit(){
        this.addPlayload({num:20})
       },
      ...mapMutations(['addPlayload','add']),


      addActionMut(){
        this.$store.dispatch('addAction')
      },
      asyncAddAction(){
        this.$store.dispatch('asyncAddAction')
      },
      asyncAddPloyloadAction(){
        this.$store.dispatch('asyncAddPloyloadAction',{num:30})
      },
    //   ...mapActions(['addAction','asyncAddPloyloadAction']),
      addActionDispatch(){
        this.asyncAddPloyloadAction({num:20})
      },
      ...mapActions({
        addAction:'addAction',
        addActionAlias:'addAction',
        asyncAddPloyloadAction:'asyncAddPloyloadAction'
      }),
      commitIncreaseA(){
        this.$store.commit('increaseA')
      },
      commitAsyncIncreaseA(){
        this.$store.dispatch('asyncIncreaseA')
      }
  },
  mounted(){
        console.log(this.$store);
    }
}
</script>